import React, { useEffect } from 'react'
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { Observer, useLocalStore } from 'mobx-react'
import { orderModel } from '@/model/OrderModel'
import { cartModel } from '@/model/CartModel'
import cls from 'classnames'
import { Empty } from '@/components/Empty';
import { SkeletonEle } from '@/components/Skeleton'
import { OrderList } from './components/List';

import './index.scss'


export default () => {

  const store = useLocalStore(() => orderModel);
  const cartStore = useLocalStore(() => cartModel);
  const { status } = useRouter().params;

  useDidShow(() => {
    store.setStatus(status || 'WAIT_PAY');
  });

  useEffect(() => {
    cartStore.getConfig();
  }, [])


  return (
    <Observer>
      {
        () =>
          <View className="container">
            <View className="order__status">
              {
                Object.keys(store.ORDER_TAB_STATUS).map((key: string) => (
                  <Text
                    key={key}
                    className={cls('status', {
                      'curr': store.status === key
                    })}

                    onClick={() => store.setStatus(key)}
                  >{store.ORDER_TAB_STATUS[key]}</Text>
                ))
              }
            </View>
            <View className="order__type">
              {
                cartStore.isCatering &&
                Object.keys(store.ORDER_TYPE).map((key: string) => (
                  <View
                    key={key}
                    className={cls('type', {
                      'curr': store.order_type === key
                    })}
                    onClick={() => store.setOrderType(key)}
                  >{store.ORDER_TYPE[key]}</View>
                ))
              }
            </View>
            <View className="order__list">
              {
                store.items.map((order: any, idx: number) => (
                  <SkeletonEle row={3} loading={store.loading} key={idx}>
                    <OrderList
                      isCatering={cartStore.isCatering}
                      order={order}
                    />
                  </SkeletonEle>
                ))
              }
              {
                (store.items.length <= 0 && !store.loading) &&
                <Empty
                  img="http://xmmi.oss-cn-beijing.aliyuncs.com/icon/no-data.png"
                  desc="暂无相关数据"
                />
              }

            </View>
          </View>
      }
    </Observer>
  )
}
